Vue 3 Development with the PrimeVue Framework — Form and Grid Layouts

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Form Layouts

The PrimeFlex library that’s part of the PrimeVue framework comes with classes for creating form layouts.

For example, we can use the p-field class by writing:

<template>
  <div class="p-fluid">
    <div class="p-field">
      <label for="firstname1">First name</label>
      <InputText id="firstname1" type="text" />
    </div>
    <div class="p-field">
      <label for="lastname1">Last name</label>
      <InputText id="lastname1" type="text" />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

We use it to layout fields.

Also, we can write:

<template>
  <div class="p-fluid p-formgrid p-grid">
    <div class="p-field p-col">
      <label for="firstname">First name</label>
      <InputText id="firstname" type="text" />
    </div>
    <div class="p-field p-col">
      <label for="lastname">Last name</label>
      <InputText id="lastname" type="text" />
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

to separate the screen with columns and add one field to each.

p-col lets us the screen into columns.

We can add inline items by writing:

<template>
  <div class="p-formgroup-inline">
    <div class="p-field">
      <label for="firstname" class="p-sr-only">First name</label>
      <InputText id="firstname" type="text" placeholder="Firstname" />
    </div>
    <div class="p-field">
      <label for="lastname" class="p-sr-only">Last name</label>
      <InputText id="lastname" type="text" placeholder="Lastname" />
    </div>
    <Button type="button" label="Submit" />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

The p-formgroup-inline lets us add inline form fields.

The p-field-checkbox class lets us layout checkboxes vertically:

<template>
  <div class="p-field-checkbox">
    <Checkbox id="city1" name="city1" value="San Francisco" />
    <label for="city1">San Francisco</label>
  </div>
  <div class="p-field-checkbox">
    <Checkbox id="city2" name="city1" value="Los Angeles" />
    <label for="city2">Los Angeles</label>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

Grid System

PrimeVue comes with a grid system.

To add a grid, we can write:

<template>
  <div class="p-grid">
    <div class="p-col">1</div>
    <div class="p-col">2</div>
    <div class="p-col">3</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

The p-grid class creates a grid layout.

p-col make the div become columns of the grid.

If they overflow the width of the screen, then the overflowed ones will be moved to the next row.

We can set the width of each column:

<template>
  <div class="p-grid">
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
    <div class="p-col-6">6</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

Also, we can set the width of the columns according to breakpoints:

<template>
  <div class="p-grid">
    <div class="p-col-12 p-md-6 p-lg-3">A</div>
    <div class="p-col-12 p-md-6 p-lg-3">B</div>
    <div class="p-col-12 p-md-6 p-lg-3">C</div>
    <div class="p-col-12 p-md-6 p-lg-3">D</div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

Available breakpoints include:

• sm — min-width 576px
• md — min-width 768px
• lg — min-width 992px
• xl — min-width 1200px

Conclusion

We can add various kinds of layouts with the PrimeVue framework to build our Vue 3 apps.